<!-- 练习Python基本语法 -->
<template>
  <div class="quiz-page-bg">
    <div class="quiz-card">
      <el-row gutter="24">
        <el-col :span="5">
          <el-select v-model="selectedChapterId" placeholder="选择章节" @change="onChapterChange" class="chapter-select">
            <el-option v-for="ch in chapters" :key="ch.id" :label="ch.title" :value="ch.id"/>
          </el-select>
        </el-col>
        <el-col :span="19">
          <div v-if="quizList.length">
            <div class="quiz-header">
              <span class="quiz-index">题目 {{ currentIndex + 1 }}/{{ quizList.length }}</span>
              <span class="quiz-title">：{{ currentQuiz.title }}</span>
            </div>
            <div class="quiz-body">
              <div class="quiz-question">{{ currentQuiz.question }}</div>
              <el-radio-group v-model="selectedAnswer" :disabled="answered" class="quiz-options">
                <el-radio label="A">A. {{ currentQuiz.optionA }}</el-radio>
                <el-radio label="B">B. {{ currentQuiz.optionB }}</el-radio>
                <el-radio label="C">C. {{ currentQuiz.optionC }}</el-radio>
                <el-radio label="D">D. {{ currentQuiz.optionD }}</el-radio>
              </el-radio-group>
            </div>
            <div class="quiz-actions">
              <el-button @click="prevQuiz" :disabled="currentIndex === 0" class="nav-btn">上一题</el-button>
              <el-button @click="nextQuiz" :disabled="currentIndex === quizList.length - 1" class="nav-btn">下一题</el-button>
              <el-button type="primary" @click="submitAnswer" :disabled="!selectedAnswer || answered" class="submit-btn">提交</el-button>
            </div>
            <transition name="fade">
              <div v-if="answered" class="quiz-explanation">
                <el-alert :title="pass ? '回答正确！' : '回答错误！'" :type="pass ? 'success' : 'error'" show-icon/>
                <div class="explanation-text">解析：{{ explanation }}</div>
              </div>
            </transition>
          </div>
          <div v-else class="empty-tip">请选择章节</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      chapters: [],
      selectedChapterId: null,
      quizList: [],
      currentIndex: 0,
      currentQuiz: {},
      selectedAnswer: '',
      answered: false,
      pass: false,
      explanation: ''
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    loadChapters() {
      this.$http.get(this.$http.adornUrl('practice/basic/chapters')).then(({data}) => {
        if (data.code === 0) this.chapters = data.data;
      });
    },
    onChapterChange() {
      this.$http.get(this.$http.adornUrl('practice/basic/list'), { params: { chapterId: this.selectedChapterId } }).then(({data}) => {
        if (data.code === 0) {
          this.quizList = data.data;
          this.currentIndex = 0;
          this.loadQuiz();
        }
      });
    },
    loadQuiz() {
      if (!this.quizList.length) return;
      const quizId = this.quizList[this.currentIndex].id;
      this.$http.get(this.$http.adornUrl(`practice/basic/quiz/${quizId}`)).then(({data}) => {
        if (data.code === 0) {
          this.currentQuiz = data.data;
          this.selectedAnswer = '';
          this.answered = false;
          this.pass = false;
          this.explanation = '';
        }
      });
    },
    prevQuiz() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.loadQuiz();
      }
    },
    nextQuiz() {
      if (this.currentIndex < this.quizList.length - 1) {
        this.currentIndex++;
        this.loadQuiz();
      }
    },
    submitAnswer() {
      this.$http.post(this.$http.adornUrl('practice/basic/quiz/submit'), {
        quizId: this.currentQuiz.id,
        selectedAnswer: this.selectedAnswer
      }).then(({data}) => {
        if (data.code === 0) {
          this.answered = true;
          this.pass = data.pass;
          this.explanation = data.explanation;
        }
      });
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.loadChapters();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 当页面完成加载后，需要获取题目列表
    this.doGetQuizList();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
.quiz-page-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);
  padding: 16px 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.quiz-card {
  width: 100%;
  max-width: 900px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.07);
  padding: 36px 48px 32px 48px;
  margin: 32px 0;
  transition: box-shadow 0.2s;
}
.chapter-select {
  width: 100%;
  margin-bottom: 24px;
}
.quiz-header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 18px;
  color: #333;
}
.quiz-index {
  color: #409EFF;
}
.quiz-title {
  margin-left: 8px;
}
.quiz-body {
  margin-bottom: 24px;
  font-size: 16px;
}
.quiz-question {
  margin-bottom: 18px;
  font-size: 17px;
  color: #222;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  align-items: flex-start;
}
.el-radio {
  display: flex !important;
  align-items: center;
  min-width: 220px;
  padding: 10px 0 10px 8px;
  border-radius: 8px;
  transition: background 0.2s;
  margin-left: 0 !important;
}
.el-radio__label {
  padding-left: 6px;
}
.el-radio.is-checked {
  background: #e6f7ff;
}
.quiz-actions {
  margin-bottom: 18px;
  display: flex;
  gap: 18px;
}
.nav-btn {
  min-width: 90px;
  font-size: 15px;
  border-radius: 8px;
}
.submit-btn {
  min-width: 110px;
  font-size: 16px;
  border-radius: 8px;
}
.quiz-explanation {
  margin-top: 22px;
}
.explanation-text {
  margin-top: 10px;
  font-size: 15px;
  color: #666;
}
.empty-tip {
  color: #bbb;
  font-size: 18px;
  text-align: center;
  margin-top: 80px;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.4s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
@media (max-width: 1200px) {
  .quiz-card {
    max-width: 98vw;
    padding: 24px 8px 24px 8px;
  }
}
@media (max-width: 900px) {
  .quiz-card {
    padding: 12px 2vw 18px 2vw;
    border-radius: 10px;
  }
}
</style>
